import { useEffect, useRef } from 'react'
import styles from './index.module.less'
import { useProcessMiningEngineStore } from '../store'

const Canvas = () => {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const setContainerRef = useProcessMiningEngineStore((state) => state.setContainerRef)

  useEffect(() => {
    if (containerRef.current) {
      setContainerRef(containerRef)
    }
  }, [setContainerRef])

  return (
    <div id={'graph-container'} ref={containerRef} className={styles.canvas}></div>
  )
}

export default Canvas

